<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="root" v-cloak>
    {{name}}
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:'#root',
      data:{
        name:'sdfgsdg'
      }
    });
  </script>

  <!--
    假设有个场景,vue的引入必须放在body的末尾,并且引入的是一个外部资源,当浏览器打开网页是,从上到拍下渲染,当没有加载早vue 的引入时,
    会直接把{{}}的插值与法字符串原封不动的渲染到页面,直到引入的vue被加载,dom被vue接管后,页页面会再次刷新成vue接管选然后的dom,
    如果外部的vue资源加载很缓慢,会直接给观众展示一堆vue的特有的花括号或者指令字符串之类的,体验很不好,现在期望,在vue加载进来之前,
    接管DOM之前,不要展示也页面,可以给根容器加上一个属性 v-cloak,不用给值,通过css控制,有该属性的元素隐藏,在vue引入加载进来之前,
    根容器是隐藏不展示的,当被vue接管后,会直接删掉v-cloak属性,隐藏的css就不奏效了

  -->
  <script src="../../js/vue.js"></script>
</body>
</html>
